<template>
    <el-form ref="form" label-width="80px">
        <el-row style="display: flex;height: 40px;">
            <el-form-item label="选择年月">
                <el-date-picker
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    v-model="chooseMonth"
                    type="month"
                    placeholder="选择月">
                </el-date-picker>
            </el-form-item>
<!--            <el-col :span="10">-->
<!--                <el-col :span="8">-->
<!--                    <el-form-item label="省份" prop="province">-->
<!--                        <el-select v-model="searchForm.provinceId"-->
<!--                                   filterable-->
<!--                                   placeholder="请选择"-->
<!--                                   @change="selectProvince">-->
<!--                            <el-option v-for="province in provinceList"-->
<!--                                       :key="province.areaId"-->
<!--                                       :label="province.areaName"-->
<!--                                       :value="province.areaId"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="8">-->
<!--                    <el-form-item label="市" prop="city">-->
<!--                        <el-select v-model="searchForm.cityId"-->
<!--                                   filterable-->
<!--                                   placeholder="请选择"-->
<!--                                   @change="selectCity">-->
<!--                            <el-option v-for="city in cityList"-->
<!--                                       :key="city.areaId"-->
<!--                                       :label="city.areaName"-->
<!--                                       :value="city.areaId"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="8">-->
<!--                    <el-form-item label="区县">-->
<!--                        <el-select v-model="searchForm.regionId"-->
<!--                                   filterable-->
<!--                                   placeholder="请选择"-->
<!--                                   @change="selectArea">-->
<!--                            <el-option v-for="area in areaList"-->
<!--                                       :key="area.areaId"-->
<!--                                       :label="area.areaName"-->
<!--                                       :value="area.areaId"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--            </el-col>-->
            <el-button style="margin-left: 20px;" type="primary" @click="search">查询</el-button>
<!--            <el-button style="margin-left: 20px;" type="primary" @click="areaSearch">区县查询</el-button>-->
<!--            <el-button style="margin-left: 20px;" type="primary" @click="reset">重置</el-button>-->

<!--            <el-button style="margin-left: 20px;" type="primary" @click="exportPdf">导出PDF</el-button>-->
<!--            <el-button style="margin-left: 20px;" type="primary" @click="exportWord">导出WORD</el-button>-->
        </el-row>
    </el-form>
</template>

<script>
export default {
	data () {
		return {
			searchForm: {
				evalYear: wfy.format('yyyy', new Date()),
				area: '',
				city: '',
				province: '',
				areaId: null,
				cityId: null,
				regionId: null,
				region: null,
				provinceId: '',
			},
			yearsList: [],
			provinceList: [],
			cityList: [],
			areaList: [],
            chooseMonth: "",
			evalYear: '2024',
			reginId: '110106000000',
			//yearsList : [],
			regin: '',
			//areaList : this.$store.state.user.area.area,
		}
	},
	mounted () {
		this.init()
	},
	methods: {
		// 默认设置某些数据
		init () {
			this.yearsList = []
			for (let i = 2024; i < 2060; i++) {
				this.yearsList.push({
					value: i,
					label: i
				})
			}
			this.listAreaByParentId().then(({data}) => {
				this.provinceList = data
			})
		},
		listAreaByParentId (pid) {
			if (!pid) pid = 0
			return this.$http({
				url: this.$http.adornUrl(`/admin/area/listByPidForUid`),
				method: 'get',
				params: this.$http.adornParams({
					pid: pid,
					uid: this.$store.state.user.id
				})
			})
		},
		// 选择省
		selectProvince (val) {
			console.log('🚀 ~ val', val)

			let findProvince = this.provinceList.find((item) => {
				return item.areaId === val
			})
			console.log('🚀 ~ findProvince', findProvince)
			this.searchForm.province = findProvince.areaName

			this.searchForm.cityId = null
			this.searchForm.city = ''
			// 获取城市的select
			this.listAreaByParentId(val).then(({data}) => {
				this.cityList = data
			})
		},
		// 选择市
		selectCity (val) {
			let findCity = this.cityList.find((item) => {
				return item.areaId === val
			})
			console.log('🚀 ~ findCity', findCity)
			this.searchForm.city = findCity.areaName

			this.searchForm.areaId = null
			this.searchForm.area = ''
			// 获取区的select
			this.listAreaByParentId(val).then(({data}) => {
				this.areaList = data
			})
		},
		selectArea (val) {
			let findArea = this.areaList.find((item) => {
				return item.areaId === val
			})
			console.log('🚀 ~ findArea', findArea)
			//this.searchForm.area = findArea.areaName;
			this.searchForm.region = findArea.areaName
		},
		reset () {
			this.searchForm.cityId = null
			this.searchForm.city = null
			this.searchForm.province = null
			this.searchForm.provinceId = null
			this.searchForm.area = null
			this.searchForm.areaId = null
			this.searchForm.region = null
			this.searchForm.regionId = null
			this.evalYear = wfy.format('yyyy', new Date())
		},
		search () {
			// if (wfy.empty(this.evalYear)) {
			// 	this.$alert('请先选择年度', '友情提醒')
			// 	return
			// }
			// if (wfy.empty(this.searchForm.regionId)) {
            //
			// 	console.log('🚀 ~ serachForm', this.searchForm)
			// 	this.$alert('请先选择区县', '友情提醒')
			// 	return
			// }
			this.$emit('search', {
                chooseMonth: this.chooseMonth,
				evalYear: this.evalYear,
				reginId: this.searchForm.regionId,
				regin: this.searchForm.region
			})
		},
        areaSearch(){
            if (wfy.empty(this.evalYear)) {
                this.$alert('请先选择年度', '友情提醒')
                return
            }
            if (wfy.empty(this.searchForm.regionId)) {

                console.log('🚀 ~ serachForm', this.searchForm)
                this.$alert('请先选择区县', '友情提醒')
                return
            }
            this.$emit('areaSearch', {
                evalYear: this.evalYear,
                reginId: this.searchForm.regionId,
                regin: this.searchForm.region
            })
        },
		/*selectArea(val){
		  let findArea = this.areaList.find((item) => {
			return item.code === val
		  })
		  console.log('🚀 ~ findArea', findArea)
		  this.regin = findArea.name;
		},*/

		exportPdf () {
			this.$emit('exportPdf')
		},
		exportWord () {
			this.$emit('exportWord')
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
